@use "sass:math";

$size: 16px;
$barNum: 10;
$barWidth: 2px;
$barHeight: 4px;
$barColor: #444;

@keyframes IndicatorRun {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(1turn);
  }
}

.container {
  position: relative;
  width: $size;
  height: $size;
  animation: IndicatorRun 0.8s steps($barNum, jump-end) infinite;
  &.large {
    width: $size + 4px;
    height: $size + 4px;
    > div {
      &::after,
      &:after {
        height: $barHeight + 1px;
      }
    }
  }
  &.white {
    > div {
      &::after,
      &:after {
        background-color: #fff;
      }
    }
  }
  > div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    &::after,
    &:after {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      left: 50%;
      margin-left: math.div(-$barWidth, 2);
      width: $barWidth;
      height: $barHeight;
      background-color: $barColor;
    }
    @for $index from 1 through $barNum {
      $rotate: math.div(360deg, $barNum) * ($index - 1);
      $opacity: math.div($index, $barNum);
      &:nth-child(#{$index}) {
        transform: rotate($rotate);
        &::after,
        &:after {
          opacity: $opacity;
        }
      }
    }
  }
}
